<template>
  <li
    @click="
      $router.push({
        path: '/product',
        query: { goodsId: item.goodsId, productId: item.defaultProductId },
      })
    "
  >
    <div class="img">
      <img v-lazy="item.goodsImage || item.mainImage" alt="" />
    </div>
    <div class="content">
      <div class="content-header">
        <h3>{{ item.goodsName }}</h3>
        <p v-if="item.goodsBrief">{{ item.goodsBrief }}</p>
      </div>
      <div class="content-bottom">
        <span>￥{{ item.goodsPrice.toFixed(2) }}</span>
        <span>{{ item.saleNum || item.actualSales || 0 }}人已付款</span>
      </div>
    </div>
  </li>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  props: ["item"],
};
</script>

<style lang="scss" scoped>
li {
  height: 318rem;
  width: 45vw;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  box-sizing: border-box;
  // margin: 0 10rem;
  margin-left: 12rem;
  margin-bottom: 10rem;
  background-color: #fff;
  border-radius: 10rem;
  overflow: hidden;
  box-sizing: border-box;
  .img {
    img {
      width: 100%;
      height: 172rem;
    }
  }

  .content {
    width: 100%;
    padding: 10rem 10rem 15rem;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .content-header {
      h3 {
        font-size: 14rem;
        color: #2d2d2d;
        font-weight: bold;
        box-sizing: border-box;
        width: 100%;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        //代码设置了宽度100px的文本，超过四行省略号显示
      }

      p {
        color: #666;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 10rem;
      }
    }

    .content-bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        &:first-child {
          color: #fc1c1c;
          font-size: 17rem;
        }

        &:last-child {
          color: #999;
        }
      }
    }
  }
}
</style>